<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>list</title>
    <link type="text/css" rel="stylesheet" href="../../dist/cute.css"/>
    <style type="text/css">
        .m8 {
            margin: 18px 188px;
        }
        .list-item-cap {
            width: 64px;
            height: 64px;
        }
        .list-item-body {
            _margin-left: 78px;
        }
    </style>
</head>
<body>
<div class="m8">
    <ul class="list list-striped">
        <li class="list-item active">Cras justo odio</li>
        <li class="list-item odd">Dapibus ac facilisis in</li>
        <li class="list-item">Morbi leo risus</li>
        <li class="list-item odd">Porta ac consectetur ac</li>
        <li class="list-item">Vestibulum at eros</li>
    </ul>
</div>

<div class="m8">
    <div class="list list-striped">
        <a href="#" class="list-item odd active">
            Cras justo odio
        </a>
        <a href="#" class="list-item">Dapibus ac facilisis in</a>
        <a href="#" class="list-item odd">Morbi leo risus</a>
        <a href="#" class="list-item">Porta ac consectetur ac</a>
        <a href="#" class="list-item odd">Vestibulum at eros</a>
    </div>
</div>

<div class="m8">
    <ul class="list">
        <li class="list-item">
            <span class="aside badge">1</span>
            <i class="icon icon-apple"></i>&nbsp;Cras justo odio
        </li>
        <li class="list-item">
            <span class="aside badge badge-success">2</span>
            <i class="icon icon-android"></i>&nbsp;Dapibus ac facilisis in
        </li>
        <li class="list-item">
            <div class="aside">
                <span class="badge badge-info">3</span>
                <span class="badge badge-info">4</span>
            </div>
            <i class="icon icon-phone"></i>&nbsp;Morbi leo risus
        </li>
        <li class="list-item">
            <span class="aside badge badge-warn">5</span>
            <i class="icon icon-search"></i>&nbsp;Porta ac consectetur ac
        </li>
        <li class="list-item">
            <span class="aside badge badge-error">6</span>
            <i class="icon icon-users"></i>&nbsp;Vestibulum at eros
        </li>
    </ul>
</div>

<div class="m8">
    <div class="list list-nob">
        <div class="list-item">
            <div class="list-item-title">
                <span class="aside">10:25AM</span>
                List group item heading
            </div>
            <div class="list-item-content">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget
                risus varius blandit.
            </div>
        </div>
        <div class="list-item">
            <div class="list-item-title">List group item heading</div>
            <div class="list-item-content">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget
                risus varius blandit.
            </div>
        </div>
        <div class="list-item">
            <div class="list-item-title">
                <span class="aside">4:45PM</span>
                List group item heading
            </div>
            <div class="list-item-content">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget
                risus varius blandit.
            </div>
        </div>
    </div>
</div>

<div class="m8">
    <div class="list list-divide">
        <div class="list-item">
            <div class="list-item-cap"></div>
            <div class="list-item-body">
                <div class="list-item-title">
                    <span class="aside">10:25AM</span>
                    List group item heading
                </div>
                <div class="list-item-content">
                    <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                    <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                    <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                </div>
            </div>
        </div>
        <div class="list-item">
            <div class="list-item-cap"></div>
            <div class="list-item-body">
                <div class="list-item-title">
                    <span class="aside">11:30AM</span>
                    List group item heading
                </div>
                <div class="list-item-content">
                    <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                    <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                    <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                </div>
            </div>
        </div>
        <div class="list-item">
            <div class="list-item-cap"></div>
            <div class="list-item-body">
                <div class="list-item-title">
                    <span class="aside">2:25PM</span>
                    List group item heading
                </div>
                <div class="list-item-content">
                    <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                    <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                    <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                </div>
            </div>
        </div>
        <div class="list-item last">
            <div class="list-item-cap"></div>
            <div class="list-item-body">
                <div class="list-item-title">
                    <span class="aside">4:45PM</span>
                    List group item heading
                </div>
                <div class="list-item-content">
                    <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                    <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                    <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="m8">
    <div class="list">
        <div class="list-item active">
            <div class="list-item-title">
                <span class="aside">10:25AM</span>
                List group item heading
            </div>
            <div class="list-item-content">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget
                risus varius blandit.
            </div>
        </div>
        <div class="list-item">
            <div class="list-item-title">List group item heading</div>
            <div class="list-item-content">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget
                risus varius blandit.
            </div>
        </div>
        <div class="list-item">
            <div class="list-item-title">
                <span class="aside">4:45PM</span>
                List group item heading
            </div>
            <div class="list-item-content">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget
                risus varius blandit.
            </div>
        </div>
    </div>
</div>

<div class="m8">
    <div class="list">
        <a href="#" class="list-item active">
            <div class="list-item-title">
                <span class="aside">10:25AM</span>
                List group item heading
            </div>
            <div class="list-item-content">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget
                risus varius blandit.
            </div>
        </a>
        <a href="#" class="list-item">
            <div class="list-item-title">List group item heading</div>
            <div class="list-item-content">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget
                risus varius blandit.
            </div>
        </a>
        <a href="#" class="list-item">
            <div class="list-item-title">
                <span class="aside">2:45PM</span>
                List group item heading
            </div>
            <div class="list-item-content">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget
                risus varius blandit.
            </div>
        </a>
        <a href="#" class="list-item">
            <div class="list-item-title">
                <span class="aside">4:45PM</span>
                List group item heading
            </div>
            <div class="list-item-content">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget
                risus varius blandit.
            </div>
        </a>
    </div>
</div>

<div class="m8">
    <div class="list">
        <div class="list-item active">
            <div class="list-item-title">
                <span class="aside">10:25AM</span>
                List group item heading
            </div>
            <div class="list-item-content">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget
                risus varius blandit.
            </div>
        </div>
        <div class="list-item">
            <div class="list-item-title">List group item heading</div>
            <div class="list-item-content">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget
                risus varius blandit.
            </div>
        </div>
        <div class="list-item">
            <div class="list-item-title">
                <span class="aside">4:45PM</span>
                List group item heading
            </div>
            <div class="list-item-content">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget
                risus varius blandit.
            </div>
        </div>

        <div class="list-item active active-success">
            <div class="list-item-title">
                <span class="aside">10:25AM</span>
                List group item heading
            </div>
            <div class="list-item-content">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget
                risus varius blandit.
            </div>
        </div>
        <div class="list-item">
            <div class="list-item-title">List group item heading</div>
            <div class="list-item-content">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget
                risus varius blandit.
            </div>
        </div>
        <div class="list-item">
            <div class="list-item-title">
                <span class="aside">4:45PM</span>
                List group item heading
            </div>
            <div class="list-item-content">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget
                risus varius blandit.
            </div>
        </div>

        <div class="list-item active active-info">
            <div class="list-item-title">
                <span class="aside">10:25AM</span>
                List group item heading
            </div>
            <div class="list-item-content">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget
                risus varius blandit.
            </div>
        </div>
        <div class="list-item">
            <div class="list-item-title">List group item heading</div>
            <div class="list-item-content">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget
                risus varius blandit.
            </div>
        </div>
        <div class="list-item">
            <div class="list-item-title">
                <span class="aside">4:45PM</span>
                List group item heading
            </div>
            <div class="list-item-content">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget
                risus varius blandit.
            </div>
        </div>

        <div class="list-item active active-warn">
            <div class="list-item-title">
                <span class="aside">10:25AM</span>
                List group item heading
            </div>
            <div class="list-item-content">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget
                risus varius blandit.
            </div>
        </div>
        <div class="list-item">
            <div class="list-item-title">List group item heading</div>
            <div class="list-item-content">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget
                risus varius blandit.
            </div>
        </div>
        <div class="list-item">
            <div class="list-item-title">
                <span class="aside">4:45PM</span>
                List group item heading
            </div>
            <div class="list-item-content">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget
                risus varius blandit.
            </div>
        </div>

        <div class="list-item active active-error">
            <div class="list-item-title">
                <span class="aside">10:25AM</span>
                List group item heading
            </div>
            <div class="list-item-content">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget
                risus varius blandit.
            </div>
        </div>
        <div class="list-item">
            <div class="list-item-title">List group item heading</div>
            <div class="list-item-content">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget
                risus varius blandit.
            </div>
        </div>
        <div class="list-item">
            <div class="list-item-title">
                <span class="aside">4:45PM</span>
                List group item heading
            </div>
            <div class="list-item-content">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget
                risus varius blandit.
            </div>
        </div>
    </div>
</div>
</body>
</html>

